import { FC } from "react"

import { useLocale } from "@/locales"

const IPSummary: FC<any> = props => {
	const { total, successIp, failedIp } = props
	const { formatMessage } = useLocale()

	return (
		<p style={{ fontWeight: "bold" }}>
			<span key="total">{`${formatMessage({ id: "label.member.totalIp" })} ${total}${formatMessage({
				id: "label.member.count"
			})}`}</span>
			&emsp;
			<span>{formatMessage({ id: "label.member.successIp" })}</span>
			<span style={{ color: "green" }}>{successIp}</span>
			<span>{formatMessage({ id: "label.member.count" })}</span>
			&emsp;
			<span>{formatMessage({ id: "label.member.failedIp" })}</span>
			<span style={{ color: "red" }}>{failedIp}</span>
			<span>{formatMessage({ id: "label.member.count" })}</span>
		</p>
	)
}

export default IPSummary
